<template>
  <view class="box-bg">
  	<uni-nav-bar height="65px" color="#ffffff" left-icon="left" left-text="回执单" leftWidth='200px' @click="goBack">
  	</uni-nav-bar>
  </view>
  <view class="vehicle-information">
    <view class="box-title">
      出车信息
    </view>
    <view class="row-block">
      <view class="left-color">开始时间</view>
      <view>2024-09-12 15:20</view>
    </view>
    <view class="row-block">
      <view class="left-color">结束时间</view>
      <view>2024-11-06 01:36</view>
    </view>
    <view class="settlement-information">
      <view class="box-title">
        出车信息
      </view>
      <view class="row-block">
        <view class="left-color">是否结算</view>
        <view>不需要</view>
      </view>
    </view>
    <view class="usage-fee">
      <view class="box-title">
        车辆使用费用
      </view>
      <view class="free-item">
        <view class="free-words">车辆使用费用小计（元）</view>
        <view class="free-num-arrow">
          <view class="free-num " :style="{'color':'#393738'}">
            0.0
          </view>
          <view>
            <u-icon name="arrow-down" v-if="show" @click="showChange"></u-icon>
            <u-icon name="arrow-up" v-if="!show" @click="showChange"></u-icon>
          </view>
        </view>
      </view>
      <view class="other-content" v-if="!show">
        <view class="other-item">
          <view class="left-color">基础费用</view>
          <view>0.0</view>
        </view>
        <view class="other-item">
          <view class="left-color">基础费用（元）</view>
          <view>0.0</view>
        </view>
        <view class="other-item">
          <view class="left-color">燃油费（元）</view>
          <view>0.0</view>
        </view>
        <view class="other-item">
          <view class="left-color">驾驶员费用（元）</view>
          <view>0.0</view>
        </view>
      </view>
    </view>
    <view class="free-info">
      <view class="box-title">
        费用信息
      </view>
      <!-- <view class="row-block">
      <view class="left-color">开始时间</view>
      <view class="right-input">
        <u--input
        					placeholder="请输入路桥费用"
        						border="none"
                    width="30px"
        				></u--input>
      </view>
    </view>
    <view class="row-block">
      <view class="left-color">开始时间</view>
      <view class="right-input">
        <u--input
        					placeholder="请输入停车费用"
        						border="none"
                    width="30px"
        				></u--input>
      </view>
    </view>
    <view class="row-block">
      <view class="left-color">开始时间</view>
      <view class="right-input">
        <u--input
        					placeholder="请输入其它费用"
        						border="none"
                    width="30px"
        				></u--input>
      </view>
    </view>
    <view class="row-block">
      <view class="left-color">开始时间</view>
      <view class="right-input">
        <u--input
        					placeholder="出车情况费用说明"
        						border="none"
                    width="30px"
                   
        				></u--input>
      </view>
    </view> -->
      <u--form labelPosition="left">
        <view class="form-item">
          <u-form-item label="路桥费用(元)" prop="" borderBottom ref="item1" labelWidth="220px" >
            <u--input border="none" placeholder="请输入路桥所需费用"></u--input>
          </u-form-item>
        </view>
        <view class="form-item">
          <u-form-item label="停车费用(元)" prop="" borderBottom ref="item1" labelWidth="220px" >
            <u--input border="none" placeholder="请输入停车所需费用"></u--input>
          </u-form-item>
        </view>
        <view class="form-item">
          <u-form-item label="其它费用" prop="" borderBottom ref="item1" labelWidth="220px" >
            <u--input border="none" placeholder="请输入其他所需费用"></u--input>
          </u-form-item>
        </view>
        <view class="form-item">
          <u-form-item label="出车情况" prop="" borderBottom ref="item1" labelWidth="220px" >
            <u--input border="none" placeholder="出车情况或费用说明"></u--input>
          </u-form-item>
        </view>
      </u--form>
    </view>
    <view class="confirm">
      <view class="confirm-button">
        <u-button type="primary" text="确定"></u-button>
      </view>
      
    </view>
  </view>
</template>

<script setup>
  import {
    ref
  } from 'vue';
  let show = ref(true);

  function showChange() {
    show.value = !show.value
    console.log(show.value)
  }
  function goBack(){
    uni.navigateBack({
        delta: 1
      });
  }
</script>

<style  lang="scss" scoped>
 .uicon{
     font-size: 22px;
   }
   :deep(.uni-navbar__header) {
   	background: linear-gradient(-90deg, #3C88D8 0%, #7CAFE7 100%);
   
   }
   .box-bg {
   	position: relative;
   	.box-title {
   		position: absolute;
   		left: 10px;
   		bottom: 20px;
   		color: #FFFFFF;
   		font-size: 16px;
   		font-weight: 600;
   	}
   }
  .free-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-left: 10px;
    padding-right: 10px;
    height: 35px;
    background-color: #ffffff;

    .free-num-arrow {
      display: flex;

      .free-num {
        margin-right: 5px;
        color: #393738;
      }
    }
  }

  .other-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-left: 10px;
    padding-right: 10px;
    width: 100%;
    height: 35px;
    margin-bottom: 1px;
    background-color: #ffffff;
    color: #8d8d8d;
  }

  .box-title {
    display: flex;
    align-items: center;
    width: 100%;
    height: 30px;
    font-size: 12px;
    color: #8d8d8d;
    padding-left: 10px;

  }

  .row-block {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-left: 10px;
    padding-right: 10px;
    width: 100%;
    height: 35px;
    margin-bottom: 1px;
    background-color: #ffffff;
    color: #8d8d8d;
  }

  .left-color {
    color: #393738;
  }

  .form-item {
    height: 35px;
    margin-bottom: 1px;
    padding-left: 10px;
    display: flex;
    align-items: center;
    background-color: #ffffff;
  }
.confirm{
  display: flex;
  justify-content: center;
  margin-top: 40px;
  .confirm-button{
    width: 220px;
  }
}
  /* .right-input{
    width: 100px;
    
  } */
  :deep(.u--input::placeholder) {
    text-align: right;

  }
</style>